<!-- 
 * 新增需求
 * @author: 冯宇
 * @since: 2022-05-16
 * index.vue
-->
<template>
    <div class="detail-invest-container detailsPageBox">
        <div class="detailsMain">
            <div class="need-title">
                <div class="icon"></div>
                <div>机构图标</div>
            </div>

            <div class="header-img" @click="uploadImg">
                <img :src="data.imgSrc" v-if="data.imgSrc">
                <div>暂无图片</div>
            </div>

            <div class="need-title need-title-2">
                <div class="icon"></div>
                <div>基本信息</div>
            </div>

            <el-form :inline="true" :model="data.form" label-width="70px">
                <el-form-item label="机构名称：" class="message">
                    <div>{{ data.form.organizationName }}</div>
                </el-form-item>
                <el-form-item label="经营状况：" class="message">
                    <div>{{ data.form.status }}</div>
                </el-form-item>
                <el-form-item label="注册资金：" class="message">
                    <div>{{ data.form.regist_capi }}</div>
                </el-form-item>
                <el-form-item label="统一编码：" class="message">
                    <div>{{ data.form.credit_no }}</div>
                </el-form-item>
                <el-form-item label="联系人：" class="message">
                    <div>{{ data.form.contact }}</div>
                </el-form-item>
                <el-form-item label="联系方式：" class="message">
                    <div>{{ data.form.mobile }}</div>
                </el-form-item>
                <el-form-item label="所在地：">
                    <div>{{ data.form.detailAddress }}</div>
                </el-form-item>
            </el-form>



            <div class="need-title need-title-2">
                <div class="icon"></div>
                <div>主投技术领域</div>
            </div>
            <div>
                <el-tag class="tag" v-for="(ind1) in data.industrySelected">{{ ind1.keyName }}</el-tag>
            </div>



            <div class="need-title need-title-2">
                <div class="icon"></div>
                <div>机构简介</div>
            </div>
            <div style="font-size:14px" v-html="data.brief"></div>

            <div class="need-title need-title-2">
                <div class="icon"></div>
                <div>投资事件</div>
            </div>

            <TableCom :tableHeader="data.tableHeader" :tableData="data.tableData" :isShowCheckbox='false' handleWidth="100" :loading="false" :pagination="data.pagination" :showPage="false" :isShowLogicHandleCol="false" :isShowTableBtn="false" :isShowGrooveHandleCol="false" :isShowIndex="false">
            </TableCom>
        </div>

        <div class="send-btn detailsHandBtn">
            <el-button type="primary" style="width: 100px;height:36px" @click="exportPDF">导出PDF</el-button>
            <el-button style="width: 100px;height:36px" @click="backRoute('InvestOrganization')">返回</el-button>
        </div>
    </div>
</template>


<script setup>
import { onMounted, reactive, onUnmounted } from 'vue'
import { organizationDetailApi } from '@/api/interface/investOrganization.js'

import { backRoute } from '@/utils/common.js'

import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
const store = useStore()
const router = useRouter()
const route = useRoute()


const data = reactive({
    imgSrc: '',
    eid: '',
    form: {
        organizationName: '',
        status: '',
        regist_capi: '',
        credit_no: '',
        contact: '',
        mobile: '',
        detailAddress: ''
    },
    industrySelected: [],
    brief: '',
    tableHeader: [
        {
            label: '投资公司',
            prop: 'name',
        },
        {
            label: '投资时间',
            prop: 'date',
        },
        {
            label: '投资类型',
            prop: 'text',
        },
        {
            label: '投资轮次',
            prop: 'round',
        },
        {
            label: '投资金额',
            prop: 'amount',
        },
    ],
    tableData: [],
    pagination: {
        currentPage: 1,
        size: 20,
        total: 0,
    },
})



onMounted(() => {
    const level = router.currentRoute.value.meta.level
    store.dispatch('setting/setRouterCut', level)
})
onUnmounted(() => {
    store.dispatch('setting/setRouterCut', 2)
})


//获取机构详情
const getOrganizationDetail = () => {
    organizationDetailApi({ id: route.params.id }).then(res => {
        if (res.status === 200) {
            data.imgSrc = res.data.logoUrl
            data.eid = res.data.eid
            data.form.organizationName = res.data.name
            data.form.status = res.data.status
            data.form.regist_capi = res.data.regist_capi_new
            data.form.credit_no = res.data.credit_no
            data.form.contact = res.data.contactPerson
            data.form.mobile = res.data.contact
            data.form.detailAddress = res.data.detailAddress

            data.brief = res.data.brief
            data.industrySelected = res.data.industry_distribution_l1.map(v => ({ keyId: v.code, keyName: v.name }))
            data.tableData = res.data.event.map(v => {
                v.amount = v.amount.toFixed(2)
                return v
            })

        }
    })
}
getOrganizationDetail()







const exportPDF = () => {
    console.log('导出PDF');
}

</script>

<style lang="scss" scoped>
.el-select-dropdown__list {
    .el-select-dropdown__item {
        font-size: 12px;
    }
}

.detail-invest-container {
    padding: 20px;

    .header-img {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 120px;
        height: 120px;
        // background-color: #f5f5f5;
        border-radius: 4px;
        border: 1px solid #f0f0f0;
        overflow: hidden;
        font-size: 12px;

        img {
            width: 100%;
        }

        .button {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 14px;

            .icon {
                font-size: 40px;
            }
        }
    }

    :deep(.el-form-item__content) {
        font-size: 12px;
    }

    .need-title {
        display: flex;
        padding-bottom: 20px;
        font-size: 16px;
        font-weight: 700;

        .icon {
            width: 6px;
            height: 16px;
            background: #00a2ff;
            margin-right: 6px;
        }
    }

    .need-title-2 {
        margin-top: 20px;
    }

    .message {
        width: 32%;
    }

    :deep(.el-textarea__inner) {
        padding: 10px;
        font-size: 12px;
    }

    .tag {
        height: 32px;
        margin-right: 10px;
    }

    .table-handle {
        text-align: center;
        width: 100%;
        color: #f74b33;
        cursor: pointer;
    }

    :deep(.table-container) {
        padding: 0;
    }

    .analysis {
        display: flex;
        position: relative;

        .choose {
            position: absolute;
            right: 20px;
            top: 46px;
            padding: 20px;
            width: 50%;
            max-height: 400px;
            overflow-y: scroll;
            background: #ffffff;
            box-shadow: 0px 0px 30px 0px rgba(164, 171, 201, 0.5);
            border-radius: 8px;
            box-sizing: border-box;
            z-index: 99;

            .title {
                font-size: 18px;
                font-weight: 700;
            }

            .table {
                margin: 20px 0;
            }

            .button {
                text-align: right;
            }
        }
    }

    .send-btn {
        text-align: center;
    }
}

::v-deep .el-form-item__label {
    font-size: 12px;
    padding-right: 0;
}
</style>